<template>
  <view>
      <su-popup
        :show="state.show"
        type="center"
        backgroundColor="none"
        round="0"
        @close="onClose"
      >
        <view class="img-box">
          <image
            class="modal-img"
            :src="sheep.$url.cdn('/static/img/jxsh-coupon.png')"
            mode="widthFix"
            @tap="state.confirmShow = true"
          />
		  <view class="price">
			 ￥{{Number(couponData.pay_fee).toFixed(0)}}抵￥<text>{{Number(couponData.price).toFixed(0)}}</text>
		  </view>
        </view>
      </su-popup>
	  <su-popup
	    :show="state.confirmShow"
	    type="center"
	    backgroundColor="none"
	    round="0"
	    @close="state.confirmShow = false"
	  >
		<view class="confirmPopup">
			<view class="confirmPopup-top ss-flex-col ss-col-center">
				<view class="top-title">
					请确认购买优惠券数量
				</view>
				<view class="top-num">
					<su-number-box
					  :min="1"
					  :max="9999"
					  :step="1"
					  v-model="state.num"
					></su-number-box>
				</view>
				<view class="top-tips">
					支付成功后无法退款
				</view>
			</view>
			<view class="confirmPopup-bottom ss-flex">
				<view class="bottom-cancel" hover-class="ss-hover-btn" @tap="state.confirmShow = false">
					取消支付
				</view>
				<view class="bottom-confirm"  hover-class="ss-hover-btn" @tap="pay">
					确认支付
				</view>
			</view>
		</view>
	  </su-popup>
  </view>
</template>


<script setup>
  import sheep from '@/sheep';
  import { computed, ref,watch,onMounted, reactive } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import {times} from "@/sheep/helper/digit.js"
  const emits = defineEmits(['close']);
   const props = defineProps({
     show: {
       type: Boolean,
       default: false,
     },
	 couponData:{
		type: Object,
		default:()=>({})
	 }
   });
   const data=ref({})
   const state = reactive({
	   show:false,
	  confirmShow:false,
	   num:1,
   })
   watch(
     () => props.show,
     (newVal) => {
       state.show = newVal
     },{
		 immediate: true,
	 }
   );
   function onClose(e){
	   emits('close',false)
   }
   
   function pay(){
	   uni.showModal({
		   title: '请确认代金券支付',
		   content: `${props.couponData.pay_fee}元抵${props.couponData.price}元代金券共${state.num}张,需要支付${times(props.couponData.pay_fee,state.num)}元,支付成功后无法退款`,
		   confirmText:'确认充值',
		   confirmColor:'#566C8F',
		   success:async function (res) {
			   if (res.confirm) {
				   state.confirmShow = false
				   await buy()
			   }else if (res.cancel) {
					console.log('用户点击取消');
				}
		   },
		  
		   
	   })
   }
   
   async function buy(){
   	   sheep.$router.go('/pages/pay/coupon', {
   	     ...props.couponData,
		 num:state.num,
		 type:'coupon'
   	   });
   	   uni.setStorageSync('home_coupon_buy','home_coupon_buy')
   }
   
   async function getDetail(){
	   const res = await sheep.$api.coupon.home_coupon_detail({coupon_id:7})
	   data.value=res.data
	   console.log('data.value',data.value)
   }
   
   onMounted(async ()=>{
	   // await getDetail() 
   })
 
</script>

<style lang="scss" scoped>
	::v-deep{
		.cicon-add-round,
		.cicon-move-round{
			padding: 0 10rpx;
		}
	}
  .modal-img{
	  width:494rpx;
	  height:642rpx
  }
  .img-box{
	  position:relative;
	  font-size: 30rpx;
	  font-weight:bold;
	  .price{
		  position:absolute;
		  color:#fff;
		  top:290rpx;
		  left: 135rpx;
		  text{
		  		font-size: 72rpx;  
		  }
	  }
	  
  }
  .confirmPopup{
	  width: 652rpx;
	  height: 420rpx;
	  border-radius: 24rpx;
	  background: #FFFFFF;
	  .confirmPopup-top{
		  height: 300rpx;
		  box-sizing: border-box;
		  padding: 40rpx 0 0;
		  border-bottom: 2rpx solid #E7E7E7;
		  .top-title{
			  height: 58rpx;
			  font-family: Source Han Sans;
			  font-size: 40rpx;
			  font-weight: bold;
			  line-height: normal;
			  letter-spacing: 4px;
			  color: #202020;
		  }
		  .top-num{
				margin-top: 42rpx;
		  }
		  .top-tips{
			  margin-top: 32rpx;
			  height: 44rpx;
			  font-family: Source Han Sans;
			  font-size: 30rpx;
			  font-weight: normal;
			  line-height: normal;
			  letter-spacing: normal;
			  color: #999999;
		  }
	  }
	  .confirmPopup-bottom{
		  font-family: Source Han Sans;
		  font-size: 32rpx;
		  font-weight: bold;
		  line-height: normal;
		  letter-spacing: 4px;
		  .bottom-cancel{
			  flex:1;
			  height: 120rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  color: #202020;
			  box-sizing: border-box;
			  border-right: 2rpx solid #E7E7E7;
		  }
		  .bottom-confirm{
			  flex:1;
			  height: 120rpx;
			  color: #566C8F;
			  display: flex;
			  align-items: center;
			  justify-content: center;
		  }
	  }
  }
</style>
